const { ipcRenderer } = require("electron");
const { $ } = require("./helper");
const path = require("path");

let musicFilesPath = [];
$("select-music").addEventListener("click", () => {
  ipcRenderer.send("open-music-file");
});

$("add-music").addEventListener("click", () => {
  ipcRenderer.send("add-tracks", musicFilesPath);
});

const renderListHTML = (pathes) => {
  const musicList = $("musicList");
  const musicItemHTML = pathes.reduce((html, music) => {
    return (html += `<li class="list-group-item">${path.basename(music)}</li>`);
  }, "");

  musicList.innerHTML = `<ul class="list-group">${musicItemHTML}</ul>`;
};

ipcRenderer.on("select-file", (_, paths) => {
  renderListHTML(paths);
  musicFilesPath = paths;
});
